<template>
  <div class="disk-item">
    <div class="disk-icon-wrapper">
      <img v-if="props.diskImg" :src="getAssetsImages(props.diskImg)" alt="disk icon" class="icon-image" />
      <div v-else class="icon-placeholder">
        <div class="status-light"></div>
      </div>
    </div>

    <div class="disk-info">
      <span class="disk-name">{{ props.diskName }}</span>

      <div class="progress-row">
        <div class="progress-track">
          <div class="progress-bar" :style="barStyle"></div>
        </div>

        <!-- <button v-if="isOverLimit" class="cleanup-button" title="磁盘容量不足" @click="emitCleanup">!</button> -->
        <button v-if="isOverLimit" class="cleanup-button" title="磁盘容量不足">!</button>
      </div>

      <span class="disk-stats">{{ infoText }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

function getAssetsImages(url) {
  return new URL(url, import.meta.url).href;
}

// 1. 定义 props 接口 (无变化)
interface Props {
  diskImg?: string;
  //盘符名称
  diskName: string;
  //磁盘大小
  diskSize: string;
  //已使用
  diskUsed: string;
  //可用
  diskAvail: string;
  //使用率
  usePercent: number;
  limitPercent: number;
}
const props = defineProps<Props>();

// 4. 核心逻辑 (Computed) (基本无变化)

const infoText = computed(() => {
  return `容量 ${props.diskSize},可用 ${props.diskAvail} ,已用 ${props.diskUsed}, 使用率 ${props.usePercent}%`;
});

// isOverLimit 计算属性现在用于 v-if
const isOverLimit = computed(() => {
  return props.usePercent > props.limitPercent;
});

const barStyle = computed(() => ({
  width: `${props.usePercent}%`,
  backgroundColor: isOverLimit.value ? '#F56C6C' : '#409EFE' // 危险红 vs 默认蓝
}));
</script>

<style scoped>
/* 整个组件的容器 (无变化) */
.disk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
  color: #e0e0e0;
  padding: 8px;
}

/* 1. 左侧图标区域 (无变化) */
.disk-icon-wrapper {
  flex-shrink: 0;
}
.icon-image {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.icon-placeholder {
  width: 42px;
  height: 42px;
  background-color: #777;
  border: 1px solid #999;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.status-light {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: #67c23a;
  border-radius: 50%;
  box-shadow: 0 0 3px #67c23a;
}

/* 2. 右侧信息区域 (无变化) */
.disk-info {
  flex-grow: 1;
  width: 100%;
}

/* 2.1 磁盘名称 (无变化) */
.disk-name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #2c2c2c;
}

/* 2.2 【新增】进度条和按钮的 flex 容器 */
.progress-row {
  display: flex;
  align-items: center;
  gap: 8px; /* 进度条和按钮的间距 */
}

/* 2.2 【修改】进度条轨道 */
.progress-track {
  /* (移除) width: 100%; */
  flex-grow: 1; /* 【新增】占据 .progress-row 中的主要空间 */
  height: 20px;
  background-color: #d3d3d3;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 2.2 进度条 (无变化) */
.progress-bar {
  height: 100%;
  border-radius: 4px 0 0 4px;
  transition:
    width 0.4s ease,
    background-color 0.4s ease;
}

/* 2.2 【新增】清理按钮样式 */
.cleanup-button {
  flex-shrink: 0; /* 防止按钮被压缩 */

  /* 模仿 Element Plus 警告按钮的圆形图标样式 */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fde2e2; /* Element Plus warning-light-8 */
  background-color: #fef0f0; /* Element Plus warning-light-9 */
  color: #f56c6c; /* Element Plus danger color */

  font-size: 14px;
  font-weight: bold;
  line-height: 1; /* 重置行高 */

  /* 使用 flex 居中 "!" */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  cursor: pointer;
  transition: all 0.3s ease;
}

.cleanup-button:hover {
  background-color: #f56c6c;
  color: #ffffff;
  border-color: #f56c6c;
}

/* 2.3 磁盘统计 (无变化) */
.disk-stats {
  display: block;
  font-size: 14px;
  color: #383838;
  margin-top: 5px;
}
</style>
